<template>
  <div class="otherIndex">
     <div class="photobanner">

              <a href="#/" v-if="!showSetting" class="ico-home"></a>

              <span class="setting" v-if="showSetting" v-on:click="gotoAddress('/me/people')"><img class="setup" src="../../assets/images/me-setup.png"></span>

              <div class="img"><img class="photo" :src="'http://api.piver.cn/image/users/'+id+'.jpg?v='+Math.random()"></div>

              <div class="left1 content-l on" v-if="!follow" @click="followPeople()">+ 关注</div>
              <div class="left1 content-l color " v-if="follow" @click="unfollowPeople()">√已关注</div>
              <div class="right content-r" @click="gotoAddress('/me/msgtalk?id='+id)">@私信她</div>

              <div class="name">{{people.firstname}}</div>
              <div class="total clearFix">
                  <div class="fl left">
                      <p>{{people.followers}}</p>
                      <span>关注</span>
                  </div>
                  <div class="fl">
                      <p>{{people.fans}}</p>
                      <span>粉丝</span>
                  </div>
              </div>
        </div>

        <div class="me-box">
            <ul class="list">
              <li class="on" @click = "gotoAddress('/otherIndex?id='+id)">
                主页
              </li>
              <li @click = "gotoAddress('/otherShop?id='+id)">
                商品
              </li>
              <!--<li @click = "gotoAddress('/me/otherArticle')">发表</li>-->
            </ul>
            <div class="content">
              <div class="list2">
                    <p class="clearFix">
                        <span>性别:</span>
                      <b v-if="people.gender=='1'">男</b>
                      <b v-if="people.gender=='2'">女</b>
                    </p>
                    <p class="clearFix">
                        <span>生日:</span><b>{{people.brith}}</b>
                    </p>
                    <p class="clearFix" v-if="address.provice_name">
                        <span>地区:</span><b>{{address.provice_name}} {{address.city_name}} {{address.district_name}}</b>
                    </p>
                    <!--<p class="clearFix">-->
                        <!--<span>女神金币:</span><b>240</b>-->
                    <!--</p>-->
                    <p class="introduce">简介: {{people.signature}}    </p>
              </div>
            </div>
        </div>




  </div>
</template>

<script>

  import {Toast} from 'mint-ui'

  export default {
  name: 'OtherIndex',
  data () {
    return {
      id:'',
      people:{},
      address:{},
      follow:false,
      showSetting:false,
      token:sessionStorage.user && JSON.parse(sessionStorage.user).token || ''
    }
  },
     methods: {
       gotoAddress(path){
         this.$router.push(path)
       },

       initData:function(){
          this.id= this.$route.query.id;
//         console.log(this.id);

         var  ajaxData = {};
         ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
         ajaxData.uid = this.id;

         var _this=this;
         $.ajax({
           type:'get',
           url: RouteMap.otherPeople,
           data:ajaxData,
           success:function(res){
             if(res.code == 200){

               _this.people = res.data;
               _this.address = res.data.address;

               if(res.data.isFolloer){
                 _this.follow = true;
               }else{
                 _this.follow = false;

               }

             }
             else{
               //Toast(res.msg)
             }
           }
         })
       },

        followPeople:function(){
          var _this = this;
          if (_this.token == '') {
//          _this.$router.push('/login');
            _this.$router.push({path:'/login',query: {redirect: location.hash.replace('#','')}});
            return;
          }

          var  ajaxData = {};
          ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
          ajaxData.follow_customer_id = this.id;

          $.ajax({
            type:'post',
            url: RouteMap.followPeople,
            data:ajaxData,
            success:function(res){
              if(res.code == 200){

                //Toast(res.msg);
                _this.follow = true;
//               console.log(res.data)
              }
              else{
                //Toast(res.msg)
              }
            }
          })

        },

        unfollowPeople:function(){

          var  ajaxData = {};
          ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
          ajaxData.unfollow_customer_id = this.id;

          var _this=this;
          $.ajax({
            type:'post',
            url: RouteMap.unfollowPeople,
            data:ajaxData,
            success:function(res){
              if(res.code == 200){

                //Toast(res.msg);
                _this.follow = false;

              }
              else{
                //Toast(res.msg)
              }
            }
            })
        }

     },

  mounted:function() {
    this.initData()
//    alert(this.$route.query.id)
//    alert(sessionStorage.user && JSON.parse(sessionStorage.user).customer_id)
    if(this.$route.query.id == (sessionStorage.user && JSON.parse(sessionStorage.user).customer_id)){

      this.showSetting = true;
    }

  }



}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.photobanner{ text-align: center; padding-top:1.92rem; padding-bottom: 1.6rem; position: relative; background: #fff;}
.img{padding-bottom:.8rem;}
.photo{ border-radius:50%; width: 3.84rem; height:3.84rem;}
.name{font-size:.683rem;color:#000;padding-bottom:.72rem; font-weight:bold;}
.total{   margin-left: 6.2rem;width:4rem;}
.total p{color:#707070; font-size:.725rem;}
.total span{color:#707070; font-size:.427rem; font-weight:bold;}
.total .left{padding-right:1.36rem;}
.photobanner .left1{position: absolute; top:3.5rem; left:2.80rem;}

.photobanner .content-l{ border:1px solid #b01f24 ; font-size:.43rem; padding:.15rem 0;
                          width:2.8rem; border-radius:5px; color:#b01f24 ;}
.photobanner .content-r{ border:1px solid #b01f24 ; font-size:.43rem; padding:.15rem 0;
                          width:2.8rem; border-radius:5px; color:#b01f24 ;}
.photobanner .color{background:#b01f24 ;color:#fff;}
.photobanner .right{position: absolute; top:3.5rem; right:2.80rem;}

.setting{ position: absolute; right: .64rem; top: 1.49rem; background: none;border: none}
.setup{width:.756rem;height:.756rem;}


.me-box{
  background:#fff;
}
.list{
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding-bottom:1.064rem;
  color:#b0242a;
}
.list li {
    padding-top:.21rem;

}
.list .on {

    border-top:0.17rem solid #ae2124;

}

.content {
    padding:0 .604rem;


}
.content .list2{
    border-top: 1px solid #ccc;
    padding-bottom:1.19rem;
}

.content p{
  line-height:1.87rem;
  border-bottom:1px solid #ccc;
  padding:0 .149rem;
  font-size:.51rem;
  color:#000;

}
.content p span{float:left;}
.content p b{float:right;}
.content p.introduce{
height:6.28rem;
}
</style>
